<template>
  <uni-popup
    ref="drawerPopup"
    type="bottom"
    @change="change"
    safeArea
    backgroundColor="#fff"
		:maskClick="false"
  >
    <view class="drawer_body">


      <view class="drawer_title" v-if="title">
        {{ title }}
      </view>
      <view v-if="list?.length" class="drawer_list">
      <view
        v-for="(item, index) in list"
        :key="index"
        class="drawer_title"
        @click="handleClick(index)"
        :style="{ color: active === index ? '#ff5800' : '' }"
      >
        {{ item.label }}
      </view>
    </view>
      <view class="drawer_operate" @click.stop="confirm" v-if="confirm_title">
        {{ confirm_title }}
      </view>
      <slot v-else></slot>
      <view v-if="iclose" class="drawer_operate close" @click.stop="close">
        取消
      </view>
    </view>
  </uni-popup>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits, watch, ref } from "vue";
const drawerPopup = ref<any>(null);

import _ from "lodash";
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  activeIndex: {
    type: Number,
    default: 0,
  },
  list: {
    type: Array,
    default: () => [],
  },
  confirm_title: {
    type: String,
    default: "确定",
  },
  modelValue: {
    type: Boolean,
    default: false,
  },
  diySlot: {
    type: Boolean,
    default: false,
  },
  mask: {
    type: Boolean,
    default: true,
  },
  iclose: {
    type: Boolean,
    default: true,
  },
});
const emit = defineEmits(["confirm", "update:modelValue"]);
const active = ref(0);
const click = () => {
  if (props.mask) {
    close();
  }
};
const change = (e) => {
	if(!e.show) {
		emit("update:modelValue", false);
	}
};
const clos = () => {
  emit("update:modelValue", false);
};
const confir = () => {
  emit("confirm", active.value);
};

const close = _.debounce(clos, 500, { leading: true, trailing: false });
const confirm = _.debounce(confir, 500, { leading: true, trailing: false });

const handleClick = (index) => {
  if (active.value === index) return;
  active.value = index;
  emit("update:modelValue", false);
  emit("confirm", index);
};

watch(
  () => props.modelValue,
  (val) => {
    if (val) {
      drawerPopup.value.open();
    } else {
      drawerPopup.value.close();
    }
  }
);

watch(
  () => props.activeIndex,
  (val) => { 
    if (active.value === val) return;
    active.value = val;
  },
  {
    immediate: true,
  }
);
</script>

<style lang="scss" scoped>
.drawer_body {
  border-radius: 16rpx 16rpx 0rpx 0rpx;
  background-color: #fff;
  width: 100%;
  @include flexCC;

  .drawer_list {
    border-bottom: 24rpx solid $backColor;
    width: 100%;
  }
  .drawer_title {
    padding: 32rpx 0;
    // @include dfont;
    color: #a0a0ad;
    border-bottom: 1rpx solid $backColor;
    width: 100%;
    text-align: center;
  }


  .drawer_operate {
    @include dfont(32rpx);
    border-bottom: 12rpx solid $backColor;
    text-align: center;
    padding: 32rpx 0;
    width: 100%;
  }

  .close {
    border: none;
    padding: 30rpx 0;
  }
}

.drawer_operate:active {
  background-color: rgba(243, 244, 245, 0.4);
}
</style>
